
import React from 'react';
import './forms.scss';
import { FormControl } from '../../utils/form/FormControl';
import { Utils } from '../../utils/utils';
import { Components, Platform } from '../..';



interface IProps {
    formControl: FormControl,
    className?: string,
    style?: React.CSSProperties,
}
export default function MyAuto(props: IProps) {

    const { formControl, className = '' } = props;

    const [_update, setUpdate] = React.useState('');

    React.useEffect(() => {
        formControl.selectorChange(_v => {
            setUpdate(Utils.getRandomChars(2));
        });
    }, []);

    const rendererFormItem = (): React.ReactNode => {

        switch (formControl.selector) {
            case 'input':
                return (
                    <Components.forms.Input formControl={formControl} className={className} />
                )
            case 'select':
                if (Platform.isMobile) {
                    return (
                        <Components.forms.Picker formControl={formControl} className={className} />
                    )
                } else {
                    return (
                        <Components.forms.Select formControl={formControl} className={className} />
                    )
                }
            case 'textarea':
                if (Platform.isMobile) {
                    return (
                        <Components.forms.TextareaModal formControl={formControl} className={className} />
                        // <Components.forms.Rich formControl={formControl} className={className} />
                    )
                }
                return (
                    <Components.forms.Textarea formControl={formControl} className={className} />
                    // <Components.forms.Rich formControl={formControl} className={className} />
                )
            case 'textareaModal':
                return (
                    <Components.forms.TextareaModal formControl={formControl} className={className} />
                )
            case 'date':
                if (Platform.isMobile) {
                    return (
                        <Components.forms.DatePicker formControl={formControl} className={className} />
                    )
                } else {
                    return (
                        <Components.forms.Date formControl={formControl} className={className} />
                    )
                }
            case 'number':
                return (
                    <Components.forms.Number formControl={formControl} className={className} />
                )
            case 'currency':
                return (
                    <Components.forms.Currency formControl={formControl} className={className} />
                )
            case 'files':
                return (
                    <Components.forms.Files formControl={formControl} className={className} />
                )
            case 'radio':
                return (
                    <Components.forms.Radio formControl={formControl} className={className} />
                )
            case 'dropdown':
                return (
                    <Components.forms.Dropdown formControl={formControl} className={className} />
                )
            case 'checkbox':
                return (
                    <Components.forms.Checkbox formControl={formControl} className={className} />
                )
            case 'cascader':
                if (Platform.isMobile) {
                    return (
                        <Components.forms.CascadePicker formControl={formControl} className={className} />
                    )
                } else {
                    return (
                        <></>
                    )
                }
            case 'startend':
                return (
                    <Components.forms.StartEnd formControl={formControl} className={className} />
                )
            case 'picker':
                return (
                    <Components.forms.Picker formControl={formControl} className={className} />
                )
            case 'datePicker':
                return (
                    <Components.forms.DatePicker formControl={formControl} className={className} />
                )
            case 'cascadePicker':
                return (
                    <Components.forms.CascadePicker formControl={formControl} className={className} />
                )
            default:
                return <></>
        }
    };


    return rendererFormItem();
}
